<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" />
      <p>商城管理</p>
      <span></span>
    </div>
    <div class="shoppingCenter">
      <div class="shoppingCenter-title"><span></span>订单统计</div>
      <ul class="shoppingCenter-order">
        <li v-for="(item,index) in order" :key="index">
          <strong>{{item.num}}</strong>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="shoppingCenter">
      <div class="shoppingCenter-title"><span></span>收入统计</div>
      <ul class="shoppingCenter-order">
        <li v-for="(item,index) in income" :key="index">
          <strong>{{item.num}}</strong>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="shoppingCenter">
      <div class="shoppingCenter-title"><span></span>商品统计</div>
      <ul class="shoppingCenter-order">
        <li v-for="(item,index) in goods" :key="index">
          <strong>{{item.num}}</strong>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        order:[
          {num:'2',name:'新订单'},
          {num:'5',name:'代配送订单'},
          {num:'2',name:'今日订单'},
          {num:'120',name:'本周订单'},
          {num:'1234',name:'本月订单'}
        ],
        income:[
          {num:'5000',name:'今日收入'},
          {num:'5000',name:'本周收入'},
          {num:'5000',name:'今日收入'}
        ],
        goods:[
          {num:'5000',name:'当前商品总数'}
        ]
      }
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#F4F4F4')
    }
  }
</script>
<style>
  .shoppingCenter{
    background-color: #FFFFFF;
    padding: 0.46rem 0.4rem 0;
    margin-top: 0.26rem;
  }
  .shoppingCenter-title{
    display: flex;
    align-items: center;
    font-size: 0.37rem;
    color: #333333;
    margin-bottom: 0.53rem;

  }
  .shoppingCenter-title span{
    width: 0.1rem;
    height: 0.24rem;
    border-radius: 0.05rem;
    margin-right: 0.16rem;
    background-color: #6DC5C6;
  }
  .shoppingCenter-order{
    display: flex;
    flex-wrap: wrap;
  }
  .shoppingCenter-order li{
    text-align: center;
    margin: 0 0.70rem 0.66rem;
    min-width: 1.6rem;
    font-size: 0.32rem;
    color: #333333;
  }
  .shoppingCenter-order li strong{
    display: block;
    color: #6DC5C6;
    font-size: 0.42rem;
    margin-bottom: 0.3rem;
  }
</style>
